<template>
  <view class="template-help tn-safe-area-inset-bottom">
    <u-navbar title="帮助中心" :autoBack="true" />
    <view class="tn-margin-bottom-xl">
      <view class="tn-flex tn-flex-row-between tn-padding tn-strip-bottom-min tn-margin-top-xs">
        <view class="justify-content-item">
          <view class="tn-text-bold tn-text-lg">
            常见问题
          </view>
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding tn-margin-top-xs"
        v-for="(item, index) in helpList" :key="index" @click="click('/user/default/default')">
        <view class="justify-content-item">
          <view class="tn-text-df">
            {{ item.title }}
          </view>
        </view>
        <view class="justify-content-item tn-text-lg tn-color-grey">
          <view class="tn-icon-right"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TemplateHelp',
  data() {
    return {
      helpList: [
        {
          title: "课表不显示或显示假期中",
          name: "",
        },
        {
          title: "如何修改密码",
          name: "",
        },
        {
          title: "提示系统维护",
        }
      ]
    }
  },
  methods: {
    // 跳转
    click(e) {
      uni.navigateTo({
        url: e,
      });
    },
  }
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #F8F9FB;
}

.tn-strip-top {
  width: 100%;
  border-top: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/
</style>